/*
报名
AddEnroll.js*/

import React, { PropTypes, Component } from 'react';
import { autobind } from 'core-decorators';
import { Button, Modal, Form, Input, message,Row,Col } from 'antd';
import { connect } from 'react-redux';
import {PrevatePdtSelect,PrevateManagerSelect,DivisionSelect} from '../../components/SelectToolBar';
import DepartmentList from './DepartmentList';
import DepartMentChoice from './DepartMentChoice';
import style from './addEnroll.less';

const FormItem = Form.Item;

const AddEnrollForm = Form.create()(
	(props) => {
		const { 
			visible, 
			onCancel, 
			onCreate, 
			form,
			privateData,
			dispatch,
			pdtData,
			departmentData,
			departMentArr,
			isCustom,
			customDepartment,
			enrollDivisionId,
			DetailsData,
			Pdtdepartment,
			isShowDepartment,
			pdtIdArr
	  } = props;
		console.log('AddEnroll>>>',props)
		const { getFieldDecorator } = form;
		/*const divisionArr= divisionList.divisionList
		function clickCustom(){
			if(isCustom == false){
				dispatch({
					type:'privateGame/setState',
					payload:{
						'isCustom':true
					}
				})
			}else{
				dispatch({
					type:'privateGame/setState',
					payload:{
						'isCustom':false
					}
				})
			}
		}*/
		function handleInputChange(e){
			console.log('AddEnroll>input',e.target.value)
			dispatch({
				type:'privateGame/setState',
				payload:{
					'customDepartment':e.target.value
				}
			})
		}
		function Clickdepart(){
			// const Clickdepart=document.getElementsByClassName("Clickdepart");
			// const ClickCustom=document.getElementsByClassName("ClickCustom");
			const Clickdepart= document.querySelector('.add-Clickdepart');
			const ClickCustom= document.querySelector('.add-ClickCustom');
			if(Clickdepart){
				Clickdepart.style.color=`blue`;
			}
   		if(ClickCustom){
   			ClickCustom.style.color=`black`;
   		}
   		
			dispatch({
	  		type:'privateGame/setState',
	  		payload:{
	  			'isCustom':false,
	  			'isShowDepartment':true,
	  			'customDepartment':''
	  		}
	  	})
		}
		function ClickCustom(){
			const Clickdepart= document.querySelector('.add-Clickdepart');
			const ClickCustom= document.querySelector('.add-ClickCustom');
			if(Clickdepart){
				Clickdepart.style.color=`black`;
			}
   		if(ClickCustom){
   			ClickCustom.style.color=`blue`;
   		}
			dispatch({
	  		type:'privateGame/setState',
	  		payload:{
	  			'isCustom':true,
	  			'isShowDepartment':false,
	  			'enrollDivisionId':''
	  		}
	  	})
		}
		
		return (
			visible ?
				<Modal
					className={`${style.AddEnroll} add-AddEnroll`}
					visible={visible}
					title='参赛报名'
					okText="提交"
					cancelText="取消"
					onCancel={onCancel}
					onOk={onCreate}
				>
					<Form layout="vertical">
						<FormItem label="选择私募管理人">
							
              <PrevateManagerSelect 
              	data={privateData}
              	dispatch={dispatch}
              />
            </FormItem>
            {
            	pdtData&&!_.isEmpty(pdtData)?<FormItem label='选择产品'>
	           	 	{
		            	pdtData&&!_.isEmpty(pdtData)?<PrevatePdtSelect
		            		value={pdtIdArr&&pdtIdArr!==''?pdtData.find(item=>item.productId==pdtIdArr).productName:''}
		            		data={pdtData}
		            		competitionId={DetailsData.id}
			            	dispatch={dispatch}
		            	/>:null
	            	}
	            </FormItem>:<span>暂无产品</span>
            }
            
            {
            	!_.isEmpty(Pdtdepartment)&&!_.isEmpty(pdtData)?<div>
            		<Row>
            			<label
            				className={`${style.Clickdepart} add-Clickdepart`}
            				onClick={Clickdepart} 
            			>
            				选择营业部
            			</label>&nbsp;&nbsp;&nbsp;&nbsp;
            			<label
            				className={`${style.ClickCustom} add-ClickCustom`} 
            				onClick={ClickCustom}
            				>
            				自定义</label>
            		</Row>
            		<Row>
            			{
            				Pdtdepartment.p_department == null?<div>
			            		{
			            			isShowDepartment?<DepartMentChoice
					            		departMentArr={Pdtdepartment.c_department}
					            	/>:<div>
					            		<Input onChange={handleInputChange}/>
					            		{
							            	customDepartment!==''?<FormItem label='选择赛区'>
								            	<DivisionSelect
								            		data={DetailsData.divisionList}
									            	dispatch={dispatch}
									            	tag='privateGame'
								            	/>
								            </FormItem>:null
							            }
					            	</div>
			            		}
				            </div>:<Input value={Pdtdepartment.p_department.name} disabled/>
            			}
            		</Row>
            	</div>:null
            }
					</Form>
				</Modal> : null
		);
	},
);
const mapStateToProps = state => ({
	pdtData:state.privateGame.pdtData,
	departmentData:state.privateGame.departmentData,
	departmentIdList:state.privateGame.departmentIdList,
	managerId:state.privateGame.managerId,
	pdtIdArr:state.privateGame.pdtIdArr,
	departMentArr:state.privateGame.departMentArr,
	enrollDivisionId:state.privateGame.enrollDivisionId,
	DetailsData:state.privateGame.DetailsData,
	isCustom:state.privateGame.isCustom,
	customDepartment:state.privateGame.customDepartment,
	Pdtdepartment:state.privateGame.Pdtdepartment,
	divisionId:state.privateGame.divisionId,
	isShowDepartment:state.privateGame.isShowDepartment
});
const mapDispatchToProps = {
	gameSignUp: query => ({
   	type: 'privateGame/gameSignUp',
   	payload: query || {},
 	}),
 	changeState:query =>({
 		type: 'privateGame/changeState',
   	payload: query || {},
 	})
};

@connect(mapStateToProps, mapDispatchToProps)
class AddEnroll extends Component {
	static propTypes = {
		form: PropTypes.object.isRequired,
	}
	constructor(props) {
		super(props);
		this.state = {
			visible: false,
			modalHeight: 0,
		};
	}
	componentWillReceiveProps(nextProps) {
		console.log('wwww',this.props,nextProps,this.state)
		// if(nextProps.pdtData!==undefined&&_.isEmpty(nextProps.pdtData)){
		// 	message.warning('该管理人下没有产品');
		// }
	}

	componentDidUpdate() {
		const screenHeight = Math.max(document.documentElement.offsetHeight, document.body.offsetHeight);
		const ele = document.querySelector('.add-AddEnroll .ant-modal-body');
		
		if (ele) {
			ele.style.height = `${screenHeight * 0.6}px`;
		}
	}

	showModal = () => {
		this.setState({ visible: true });
	}

	handleCancel = () => {
		const{changeState}=this.props;
		this.setState({ visible: false });
		changeState({
			'isCustom':false,
			'customDepartment':'',
			'Pdtdepartment':[],
			'pdtIdArr':'',
			'pdtData':[],
			'enrollDivisionId':'',
			'isShowDepartment':true,
		})
	}

	handleCreate = () => {
		const form = this.form;
		const {
			gameSignUp,
			id,
			pdtIdArr,
			departmentIdList,
			departmentData,
			enrollDivisionId,
			customDepartment,
			isCustom,
			divisionId,
			Pdtdepartment,
			pdtData,
			managerId
		} = this.props;
		console.log('sseeeeee',this.props)
		const demList=[];
		// const pdtList=[]
		const p_department = Pdtdepartment.p_department;
		console.log('sseeeeeep_department',p_department)
		form.validateFields((err, fieldsValue) => {
			if (err) {
				return;
			}
			// pdtIdArr.map((i)=>{
			// 	pdtList.push(parseInt(i))
			// })
			if(managerId == ''){
				message.warning('请选择管理人');
				this.setState({ visible: true });
			}else if(_.isEmpty(pdtData)){
				message.warning('该管理人下没有产品');
				this.setState({ visible: true });
			}else if(_.isEmpty(pdtIdArr)){
				message.warning('请选择产品');
				this.setState({ visible: true });
			}else if(!_.isEmpty(pdtIdArr) &&
				p_department !== null&&
				enrollDivisionId == ''
				&&customDepartment == ''){
				gameSignUp({
					competitionId:id,
					departmentId:p_department.id,
					productId:parseInt(pdtIdArr)
				})
				this.setState({ visible: false });
			}else if(enrollDivisionId == ''&&customDepartment == ''){
				message.warning('请选择部门');
				this.setState({ visible: true });
			}else if(enrollDivisionId !== '' && 
				!_.isEmpty(pdtIdArr)){
				gameSignUp({
					competitionId:id,
					departmentId:enrollDivisionId,
					productId:parseInt(pdtIdArr)
				})
				this.setState({ visible: false });
			}else if(!_.isEmpty(pdtIdArr) &&
				p_department == null&&
				enrollDivisionId == ''&&
				customDepartment == ''){
				message.warning('请选择或自定义部门');
				this.setState({ visible: true });
			}else if(!_.isEmpty(pdtIdArr) &&
			  p_department == null&&
			  enrollDivisionId == ''&&
			  customDepartment !== ''&&
			  divisionId == ''){
				message.warning('请选择赛区');
				this.setState({ visible: true });
			}else if(!_.isEmpty(pdtIdArr) &&
			  p_department == null&&
			  enrollDivisionId == ''&&
			  customDepartment !== ''&&
			  divisionId !== ''){
					gameSignUp({
						competitionId:id,
						description:customDepartment,
						divisionId:divisionId,
						productId:parseInt(pdtIdArr)
				})
				this.setState({ visible: false });
			}
      console.log('Received values of form: fieldsValue',fieldsValue );
			form.resetFields();
			// 
			
		});
	}

	saveFormRef = (form) => {
		this.form = form;
	}

	render() {
		console.log('AddEnroll>>>1',this.props)
		const {
			privateData,
			dispatch,
			pdtData,
			departmentData,
			id,
			departMentArr,
			DetailsData,
			customDepartment,
			isCustom,
			enrollDivisionId,
			Pdtdepartment,
			isShowDepartment,
			pdtIdArr
			}=this.props;
		
		return(
			<div >
				{/*<Button type="primary" icon="plus" onClick={this.showModal}>报名</Button>*/}
				<Button className={style.enrollBtn} icon="plus" onClick={this.showModal}>报名</Button>
				<AddEnrollForm
					ref={this.saveFormRef}
					visible={this.state.visible}
					onCancel={this.handleCancel}
					onCreate={this.handleCreate}
					privateData={privateData}
					dispatch={dispatch}
					pdtData={pdtData}
					departmentData={departmentData}
					departMentArr={departMentArr}
					DetailsData={DetailsData}
					isCustom={isCustom}
					customDepartment={customDepartment}
					enrollDivisionId={enrollDivisionId}
					Pdtdepartment={Pdtdepartment}
					isShowDepartment={isShowDepartment}
					pdtIdArr={pdtIdArr}
				/>
			</div>
		)
		
	}
}
export default Form.create({
})(AddEnroll);
